<template>
  <my-gradient title="主页" left-gradient="#e3fafe" right-gradient="#fdf6f0">
    <view class="index">
      <view class="flex">
        <up-avatar size="128rpx" text="无头像"></up-avatar>
        <view class="pl-20 py-14 flex flex-col justify-between">
          <view class="font-bold text-36 text-[#333333]">
            姓名
          </view>
          <view class="text-[#666666] aaa">
            500235199512200023
          </view>
        </view>
      </view>
      <view class="menu_box h-412 flex flex-wrap justify-between mt-30 content-between">
        <view v-for="(item,index) in menuArr" :key="index"
              class="menu_item h-198 w-335 bg-white flex rounded-[8px] p-32 border-solid border border-[#DFE2FC]">
          <view class="w-190">
            <view class="font-bold">{{ item.title }}</view>
            <view class="text-[#999999] text-24 py-14">{{ item.subtitle }}</view>
            <view>
              <text class="iconfont icon-xiangyou text-36 text-[#DFE2FC]"></text>
            </view>
          </view>
          <view class="pt-60">
            <image class="w-80 h-80" :src="item.img">
            </image>
          </view>
        </view>
      </view>
      <!--      <button @click="jumpHandle">跳转</button>-->
      <view class="text-36 font-bold pt-32">
        最新资讯
      </view>
      <view class="p-32">阿珂就发货可洁可净</view>
    </view>
  </my-gradient>
</template>

<script setup lang="ts">
import {useCounterStore} from '@/stores/counter';
import {reactive, ref} from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import myGradient from '@/components/myGradient/myGradient.vue';
import xiansuoImg from '@/static/img/main/xiansuo.png'
import axmmImg from '@/static/img/main/axmm.png'
import jzImg from '@/static/img/main/jz.png'
import wdImg from '@/static/img/main/wd.png'

const store = useCounterStore()

function jumpHandle() {
  uni.navigateTo({
    url: '/pages/ces/ces'
  })
}


const menuArr = reactive([
  {
    title: '菜单1',
    subtitle: '副标题1',
    img: xiansuoImg
  },
  {
    title: '菜单1',
    subtitle: '副标题2',
    img: axmmImg
  },
  {
    title: '菜单1',
    subtitle: '副标题3',
    img: jzImg
  },
  {
    title: '菜单1',
    subtitle: '副标题4',
    img: wdImg
  }
])

onLoad(() => {
  // const res = await getUserInfo()
  // console.log(res.data);
  // uni.setNavigationBarColor({
  //   backgroundColor: '#eefeff',
  // })
})
</script>

<style scoped lang="scss">
@import "@/minx.scss";

.index {
  padding: 32rpx;

  .menu_item {
    position: relative;
    overflow: hidden;

    > view {
      z-index: 2;
    }

    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 6rpx;
      bottom: 6rpx;
      border-radius: 8px;
      z-index: 1;
      background: linear-gradient(135deg, #ffffff 0, #ffffff 150rpx, rgba(238, 238, 238, 0.62) 100%);
      box-shadow: 10px 10px 5px #fcfcfc,
      -10px -10px 5px #ffffff;
    }
  }

}
</style>